<template>
  <view class="lang-container">
    <view class="lang-item" :class="{active: selected==='en'}" @click="select('en')">
      <view class="lang-title">English</view>
      <view class="lang-desc">英语</view>
      <view class="lang-check" v-if="selected==='en'">
        <text class="tn-icon-check"></text>
      </view>
    </view>
    <view class="lang-item" :class="{active: selected==='zh-TW'}" @click="select('zh-TW')">
      <view class="lang-title">繁體中文</view>
      <view class="lang-desc">繁体中文</view>
      <view class="lang-check" v-if="selected==='zh-TW'">
        <text class="tn-icon-check"></text>
      </view>
    </view>
    <view class="lang-item" :class="{active: selected==='zh-CN'}" @click="select('zh-CN')">
      <view class="lang-title">简体中文</view>
      <view class="lang-desc">简体中文</view>
      <view class="lang-check" v-if="selected==='zh-CN'">
        <text class="tn-icon-check"></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selected: 'zh-CN'
    }
  },
  methods: {
    select(lang) {
      this.selected = lang
      // 可加切换语言逻辑
    }
  }
}
</script>

<style scoped>
.lang-check{
	background: #000;
	border-radius: 50%;
	width: 32rpx;
	height: 32rpx;	
	display: flex;
	align-items: center;
	justify-content: center;
}
.tn-icon-check{
	color: #fff;
}
.lang-container {
  background: #fff;
  min-height: 100vh;
  padding: 0 0 0 0;
}
.lang-item {
  position: relative;
  padding: 32rpx 24rpx 18rpx 24rpx;
}
.lang-title {
  font-size: 32rpx;
  color: #111;
  font-weight: 500;
}
.lang-desc {
  font-size: 24rpx;
  color: #bbb;
  margin-top: 2rpx;
}
.lang-item.active .lang-title {
  font-weight: bold;
  color: #111;
}
.lang-check {
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #111;
  font-size: 32rpx;
}
</style>
